<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!--[if lt IE 9]>
              <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
              <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
            <![endif]-->
    <script>
        var USER = JSON.parse(window.sessionStorage.getItem("USER_LOGIN"));


    </script>

</head>

<body>
<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="index.html">首页</a> <a href="">管理员</a>
			<a> <cite>管理员列表</cite></a>
		</span> <a class="layui-btn layui-btn-small"
                   style="line-height: 1.6em; margin-top: 3px; float: right"
                   onclick="location.reload()" title="刷新"> <i
        class="layui-icon layui-icon-refresh" style="line-height: 30px"></i>
</a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日"
                                   name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日"
                                   name="end" id="end">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入用户名"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit lay-filter="sreach">
                                <i class="layui-icon">&#xe615;</i>
                            </button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table" width="100%"
                           lay-data="{url:'userSearch',page:true,toolbar: '#toolbarDemo',id:'queryTable'}"
                           lay-filter="queryTable">
                        <thead>
                        <tr>
                            <th lay-data="{type:'checkbox'}">ID</th>
                            <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                            <th
                                    lay-data="{field:'username', width:120, sort: true, edit: 'text'}">用户名
                            </th>
                            <th lay-data="{field:'name', edit: 'text', minWidth: 150}">真实姓名</th>

                            <th lay-data="{field:'telephone', edit: 'text', minWidth: 100}">电话</th>
                            <th lay-data="{field:'landmark', sort: true, edit: 'text'}">坐标</th>
                            <th lay-data="{field:'unit', sort: true, edit: 'text'}">所属单位</th>
                            <th lay-data="{field:'roleName', templet：function（data）{}}">角色</th>
                            <th lay-data="{field:'enterdate', sort: true, edit: 'text'}">入职时间</th>
                            <th lay-data="{templet: '#newsListBar',minWidth:300}">操作</th>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addNewUser">
            <i class="layui-icon">&#xe654;</i>
            添加用户
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="delBatch"> 批量删除</button>

    </div>
</script>
<!--操作-->
<script type="text/html" id="newsListBar">
    {{# if ( USER.role==1 || USER.id==d.id) { }}
    <a class="layui-btn layui-btn-xs" id="edit" lay-event="edit">编辑</a>

    <a class="layui-btn layui-btn-xs layui-btn-primary" id="look" lay-event="look">详情</a>
    <a class="layui-btn layui-btn-xs" id="updatepassword" lay-event="updatepassword">一键改密</a>
    {{# } }}
    <!--不允许删除自己，只能删除比自己级别低的人-->
    {{# if ( USER.role < d.role && USER.id!=d.id) { }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" id="del" lay-event="del">删除</a>
    {{# } }}
</script>

<script type="text/html" id="switchTpl">
    <!-- 这里的checked的状态只是演示 -->
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id==
           10003 ? 'checked': ''}} >

</script>

<script>
    layui.use(['table', 'form', 'layer', 'laydate'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
            , trigger: 'click'
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
            , trigger: 'click'
        });

        //超时自动回到首页
        $.ajaxSetup({
            complete: function (XMLHttpRequest, textStatus) {
                alert(textStatus);
                if (textStatus == "parsererror") {
                    window.top.location.href = 'login.html';
                } else if (textStatus == "error") {
                    $.messager.alert('提示信息', "请求超时！请稍后再试！", 'info');
                }
            }
        });

        //
        //查询
        form.on("submit(sreach)", function (data) {

            table.reload("queryTable", {
                page: {
                    curr: 1
                    //重新从第 1 页开始
                },
                where: {
                    name: $("input[name=username]").val(), //搜索的关键字
                    startDate: $("input[name=start]").val(),
                    endDate: $("input[name=end]").val()
                }
            });
            return false;
        });


        //监听单元行
        //删除
        //编辑
        //详情
        table.on('tool(queryTable)', function (obj) {
            var layEvent = obj.event;
            var data = obj.data;
            //alert(" case :"+layEvent);

            if (layEvent == "edit") {
                edit(data);
            }
            if (layEvent == "look") {
                look(data);
            }
            if (layEvent == "updatepassword") {
                updatepassword(data);
            }
            if (layEvent == "del") {
                del(data);
            }
            event.stopPropagation();
            //return false;
        });
        //再添加一个点击监听事件，防止因为按钮过多， 省略号隐藏的按钮没有事件
        /*table.on('row(queryTable)', function(obj){
            var data = obj.data;

            $(document).on("click","#edit",function(event){
                //alert("edit");
                edit(data);
                event.stopPropagation();//阻止事件冒泡，防止多次执行
                return false;
            });
            $(document).on("click","#look",function(){
                alert("look");
                //look
            });
            $(document).on("click","#del",function(){
                //alert("del");
                //del
                var d=[data];//封装成数组
                deleteAll(d);//
            });
            $(document).on("click","#updatepassword",function(event){
                alert("updatepassword");
                //update
                 event.stopPropagation();
            });
            return false;
        }); */
        function edit(data) {
            var id = data.id;
            //alert(id);
            xadmin.open('修改用户', './user-edit.html?' + id, 600, 400);
        }

        function updatepassword(data) {
            var id = data.id;
            //alert(id);
            xadmin.open('一键改密', './user-updatepassword.html?' + id, 600, 400);
        }

        function look(data) {
            var id = data.id;
            //alert(id);
            xadmin.open('修改用户', './user-look.html?' + id, 600, 400);
        }

        function del(data) {
            var id = data.id;

            layer.confirm('确定删除用户？', {
                icon: 3,
                title: '提示信息'
            }, function (index) {
                $.getJSON("userdel", {id: id}, function (d) {

                    if (d.code == 0) {
                        location.reload();
                    } else {
                        layer.alert("删除失败");
                    }
                });
            });
        }

        //监听单元格编辑，没有用上
        table.on('edit(queryTable)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
        });

        function deleteAll(data) {
            if (data.length == 0) {
                return;
            }
            var ids = [];
            for (var i in data) {
                ids.push(data[i].id);
            }
            alert(ids);
            //
            layer.confirm('确定删除选中的用户？', {
                icon: 3,
                title: '提示信息'
            }, function (index) {
                $.getJSON("batchDeluser", {
                    ids: ids
                }, function (d) {
                    if (d.msg == "删除成功") {
                        location.reload();
                    } else {
                        layer.alert("删除失败");
                    }
                });
            })
            //
        }

        //头工具栏事件
        //增加新用户   批量删除
        table.on('toolbar(queryTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'addNewUser':
                    xadmin.open('添加用户', './user-add.html', 600, 400);
                    break;
                case 'delBatch':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    deleteAll(data);
                    break;
                /*			case 'getCheckData':
                                var data = checkStatus.data;
                                layer.alert(JSON.stringify(data));
                                break;
                            case 'getCheckLength':
                                var data = checkStatus.data;
                                layer.msg('选中了：' + data.length + ' 个');
                                break;
                            case 'isAll':
                                layer.msg(checkStatus.isAll ? '全选' : '未全选');
                                break;*/
            }
            ;
        });
    });
</script>

</html>